<template>
    <div class="Login">
        <el-container class="h-100">
            <el-header height="96px">
                <div class="header">
                    <img class="logo-mediium" :src="sysLogo" />
                </div>
            </el-header>
            <div class="main-container">
                <el-form class="formBox" ref="loginFormRef" :model="thisData" :rules="rules">
                    <el-row>
                        <el-col :span="24">
                            <title>欢迎登录</title>
                        </el-col>
                    </el-row>
                    <el-form-item prop="loginCode">
                        <el-input maxlength="20" placeholder="请输入用户代码" v-model="thisData.loginCode" @keyup.enter="onLogin">
                            <template #prefix>
                                <el-icon>
                                    <Connection />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>

                    <el-form-item prop="loginName">
                        <el-input maxlength="20" placeholder="请输入用户名" v-model="thisData.loginName" @keyup.enter="onLogin">
                            <template #prefix>
                                <el-icon>
                                    <user />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>

                    <el-form-item prop="password">
                        <el-input maxlength="20" placeholder="请输入密码" v-model="thisData.password" @keyup.enter="onLogin" show-password>
                            <template #prefix>
                                <el-icon>
                                    <unlock />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button class="purple-button w-100" type="primary" @click="onLogin" :loading="loading">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { TipsType, UploadType } from "@/_gx/TsEnums";
const sysLogo = ref(Config._LOGO1);
//进入登录页一定先清空所有浏览器存储的内容
App.RemoveStoredData();

//创建出路由对象
const router = useRouter();

//定义当前页需要的数据
const thisData = reactive({
    loginCode: "",
    loginName: Config._LOGIN_NAME,
    password: Config._PASSWORD,
});

//定义当前表单
const loginFormRef = ref();

const loading = ref(false);

//定义表单验证规则
const rules = ref({
    loginCode: [{ required: true, message: "请输入编号", trigger: "blur" }],
    loginName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});

//登录方法
const onLogin = () => {
    loginFormRef.value.validate((isOk: boolean) => {
        if (!isOk) {
            return;
        }

        loading.value = true;

        App.Login(thisData.loginCode, thisData.loginName, thisData.password, {
            success: async () => {
                if (Config._UPLOAD_TYPE == UploadType.Qiniu) {
                    await App.GetQiniuInfo();
                }

                App.RefreshMe({
                    success: () => {
                        router.push({ path: "/" });
                    },
                    fail: () => {
                        loading.value = false;
                        App.Tips({ msg: "获取个人信息时出错！" });
                    },
                });
            },
            error: (res: any) => {
                if (!Gx.IsEmpty(res.response) && typeof res.response == "string") {
                    App.Tips({
                        msg: Gx.DeserializeObject(res.response).error_description,
                        type: TipsType.Warning,
                    });
                } else {
                    App.Tips({ msg: "登录时发生错误！", type: TipsType.Error });
                }
            },
            complete: () => {
                loading.value = false;
            },
        });
    });
};
</script>
